<template>
    <!-- 库存盘点-->
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">
                    <div class="row-item m-r">
                        时间范围：
                        <Date @dateFun="dateFun"></Date>
                    </div>
                    <div class="row-item m-r">
                        盘点类型：
                        <el-select
                                v-model="state.s_type"
                                clearable
                                placeholder="请选择盘点类型"
                                @change="changeSupplierType"
                        >
                            <el-option label="正常" value="10"></el-option>
                            <el-option label="禁用" value="1"></el-option>
                        </el-select>
                    </div>
                    <div class="row-item">
                        盘点状态：
                        <el-select
                                v-model="state.s_type"
                                clearable
                                placeholder="请选择盘点状态"
                                @change="changeSupplierType"
                        >
                            <el-option label="正常" value="10"></el-option>
                            <el-option label="禁用" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row-right">
                    <searchDiv
                            :placeholder="state.placeholder"
                            @searchClick="searchClick"
                            class="search-div"
                    ></searchDiv>
                    <el-button size="small" type="primary" @click="new_set_ware">创建</el-button>
                </div>
            </div>
            <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column fixed prop="ware_name" label="仓库名称"></el-table-column>
                <el-table-column fixed prop="order" label="盘点单号"></el-table-column>
                <el-table-column prop="time" label="盘点时间"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                <el-table-column prop="rank" label="批次号"></el-table-column>
                <el-table-column prop="spec" label="规格"></el-table-column>
                <el-table-column prop="goods_type" label="商品分类"></el-table-column>
                <el-table-column prop="book_stock" label="账面库存(袋)"></el-table-column>
                <el-table-column prop="reality_stock" label="实盘库存(袋)"></el-table-column>
                <el-table-column prop="balance" label="盈亏数量"></el-table-column>
                <el-table-column prop="price" label="盈亏金额"></el-table-column>
                <el-table-column prop="err_rate" label="库存误差率"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="state" label="状态"></el-table-column>
                <el-table-column prop="note" label="备注"></el-table-column>
                <el-table-column width="150px" fixed="right" label="操作" v-slot="scope">
                    <el-button @click="verifyFun(scope.row)" type="text" size="small">审核</el-button>
                    <el-button @click="checkFun(scope.row)" type="text" size="small">盘点</el-button>
                    <el-button @click="detailFun(scope.row)" type="text" size="small">详情</el-button>
                </el-table-column>
            </el-table>
            <!--页码-->
            <el-row type="flex" class="row-bg" justify="end">
                <el-col :span="12">
                    <Page
                            v-if="state.totalPage"
                            :totalPage="state.totalPage"
                            @changePage="changePage"
                    ></Page>
                </el-col>
            </el-row>
            <!-- 创建盘点 -->
            <el-drawer
                    :title="state.drawer_title"
                    v-model="state.new_dialogVisible"
                    center
            >
                <el-form
                        :model="state.form"
                        :rules="state.rules"
                        ref="form"
                        label-width="150px"
                        class="demo-ruleForm"
                >
                    <!--创建-->
                    <div v-if="state.drawer_type==1">
                        <div class="drawer_title">* 盘点计划名称</div>
                        <div>
                            <el-form-item label="盘点计划名称" prop="plan_name">
                                <el-input type="text" v-model="state.form.plan_name" placeholder="请输入盘点计划名称"></el-input>
                            </el-form-item>
                        </div>
                        <div class="drawer_title">* 盘点仓库</div>
                        <div>
                            <el-form-item label="盘点仓库" prop="ware_id">
                                <el-select
                                        v-model="state.form.ware_id"
                                        placeholder="请选择盘点仓库"
                                        @change="change_ware_sel"
                                >
                                    <el-option
                                            v-for="item in state.wareArray"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <!--盘点-->
                    <div v-else-if="state.drawer_type==4">
                        <div class="drawer_title">* 盘点计划名称</div>
                        <div class="detail_box">
                            盘点计划名称：<span class="span-border">盘点计划名称</span>
                        </div>
                        <div class="drawer_title">* 盘点仓库</div>
                        <div class="detail_box">
                            盘点仓库：<span class="span-border">天津总仓</span>
                        </div>
                    </div>
                    <!--详情-审核-->
                    <div v-else>
                        <div class="detail-top">
                            <span>盘点名称：45454盘点</span>
                            <span>创建时间：2021-06-05 12:12:12</span>
                            <span>提交人：132</span>
                        </div>
                        <el-tag type="warning" v-if="state.drawer_type==3">待审核</el-tag>
                        <div v-if="state.drawer_type==2">
                            <!--按照详情的状态保留一个-->
                            <el-tag type="success">已通过</el-tag>
                            <el-tag type="info">已驳回</el-tag>
                            <el-tag type="warning">待审核</el-tag>
                        </div>
                        <div class="drawer_title">* 盘点仓库</div>
                        <div class="detail_box">
                            盘点仓库：<span class="span-border">天津总仓</span>
                        </div>
                    </div>
                    <div class="drawer_title">* 盘点清单</div>
                    <!--创建--添加商品-->
                    <div v-if="state.drawer_type==1">
                        <el-table :data="state.already_table" border style="width: 100%; margin-top: 20px">
                            <el-table-column prop="ware_name" label="商品名称">
                                <template v-slot="scope">
                                    <el-select
                                            placeholder="请选择商品名称"
                                            @change="changeGoodsFun(scope.row,$event)"
                                            v-model="scope.row.selected_id"
                                    >
                                        <template v-for="(item, index) in scope.row.select_arr" :key="index">
                                            <el-option :label="item.name" :value="item.id"></el-option>
                                        </template>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="rank" label="批次号"></el-table-column>
                            <el-table-column prop="spec" label="规格">
                                <template v-slot="scope">
                                    <el-select
                                            v-model="scope.row.unit"
                                            placeholder="请选择规格"
                                            @change="changeSpecFun"
                                    >
                                        <template v-for="(item, index) in state.unitArr" :key="index">
                                            <el-option :label="item.name" :value="item.id"></el-option>
                                        </template>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="book_stock" label="账面库存"></el-table-column>
                            <el-table-column label="操作" v-slot="scope">
                                <el-button @click="deleteFun(scope.$index)" type="text" size="small">
                                    移除
                                </el-button>
                            </el-table-column>
                        </el-table>
                        <div class="add-box" @click="addGoodsFun">
                            <span>+</span>添加商品
                        </div>
                    </div>
                    <!--详情、审批、盘点-->
                    <div v-else>
                        <el-table :data="state.tableDetailArr" border style="width: 100%; margin-top: 20px">
                            <el-table-column prop="ware_name" label="商品名称"></el-table-column>
                            <el-table-column prop="rank" label="批次号"></el-table-column>
                            <el-table-column prop="spec" label="规格"></el-table-column>
                            <el-table-column prop="book_stock" label="账面库存"></el-table-column>
                            <!--盘点开始-->
                            <el-table-column label="实盘库存">
                                <template v-slot="scope">
                                    <div v-if="state.drawer_type==2">{{scope.row.reality_stock}}</div>
                                    <div v-else-if="state.drawer_type==3">{{scope.row.reality_stock}}</div>
                                    <el-input type="text" v-model="scope.row.input_check_count" placeholder="编辑"
                                              v-else-if="state.drawer_type==4"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="进价">
                                <template v-slot="scope">
                                    <div v-if="state.drawer_type==2">{{scope.row.price}}</div>
                                    <div v-else-if="state.drawer_type==3">{{scope.row.price}}</div>
                                    <el-input type="text" v-model="scope.row.input_check_price" placeholder="编辑"
                                              v-else-if="state.drawer_type==4"></el-input>
                                </template>
                            </el-table-column>
                            <!--盘点结束-->
                            <el-table-column prop="" label="盘亏/盈数"
                                             v-if="state.drawer_type!=4"></el-table-column>
                            <el-table-column prop="" label="盘亏/盈金额"
                                             v-if="state.drawer_type!=4"></el-table-column>
                            <el-table-column prop="note" label="备注"
                                             v-if="state.drawer_type!=4"></el-table-column>
                        </el-table>
                    </div>
                    <div class="drawer_title">* 备注</div>
                    <div>
                        <div class="textarea-border" v-if="state.drawer_type!=1 && state.drawer_type!=4">
                            {{state.note}}
                        </div>
                        <el-input type="textarea" v-else v-model="state.note" placeholder="请输入备注"></el-input>
                    </div>
                    <div class="drawer_title" v-if="state.drawer_type!=1 && state.drawer_type!=4">*
                        总盘亏/盈金额：￥{{state.price}}
                    </div>
                    <div v-if="state.drawer_type!=1 && state.drawer_type!=4">
                        <div class="drawer_title">* 审核反馈</div>
                        <div>
                            <div class="textarea-border" v-if="state.drawer_type==2">{{state.approve_note}}</div>
                            <el-input type="textarea" v-else v-model="state.approve_note"
                                      placeholder="请输入审核反馈"></el-input>
                        </div>
                    </div>
                </el-form>
                <div class="dialog_footer">
                    <el-button @click="closeFun">取 消</el-button>
                    <el-button type="primary" @click="submit_create" v-if="state.drawer_type!=2">提 交</el-button>
                </div>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
    import {ref, reactive, onMounted, getCurrentInstance} from "vue";
    import {ElNotification} from "element-plus";
    import searchDiv from "@/components/Search.vue";
    import Page from "@/components/Pagination.vue";
    import Date from "@/components/Datepicker.vue";

    export default {
        components: {
            searchDiv,
            Page,
            Date,
        },
        props: {},
        setup() {
            let form = ref("null");
            const {ctx} = getCurrentInstance();
            let state = reactive({
                plan_id: '',
                begin_date: "",
                end_date: "",
                new_dialogVisible: false,
                drawer_title: '创建盘点计划',
                drawer_type: 1,// 1:创建  2：详情  3：审核  4：盘点
                supplier_status: 10,
                s_type: "",
                keyword: "",
                page: 1,
                form: {
                    plan_name: "",
                    ware_id: 1,
                },
                note: '这里是备注',
                approve_note: '审核反馈',//审核反馈
                price: 0,//盘盈盘亏的金额
                rules: {
                    plan_name: [
                        {required: true, message: "请填写仓库名称", trigger: "blur"},
                    ],
                    ware_id: [
                        {required: true, message: "请选择仓库", trigger: 'change'},
                    ],
                },
                wareArray: [],//仓库
                tableDetailArr: [
                    {
                        id: 1,
                        ware_name: '名称',
                        order: '3454554',
                        time: '2021-05-06',
                        goods_name: '商品名',
                        rank: '12',
                        spec: '规格',
                        goods_type: '商品分类',
                        book_stock: '账面库存',
                        reality_stock: '盘实库存3',
                        balance: '盈亏数量',
                        price: '5445',
                        err_rate: '0.1',
                        type: '盘盈',
                        state: '已通过',
                        note: '',
                        input_check_count: '',//实际填写的盘点数
                        input_check_price: '',//实际填写的进价
                    }, {
                        id: 2,
                        ware_name: '名称2',
                        order: '3454554',
                        time: '2021-05-06',
                        goods_name: '商品名',
                        rank: '12',
                        spec: '规格',
                        goods_type: '商品分类',
                        book_stock: '账面库存',
                        reality_stock: '盘实库存3',
                        balance: '盈亏数量',
                        price: '5445',
                        err_rate: '0.1',
                        type: '盘盈',
                        state: '已通过',
                        note: '',
                        input_check_count: '',//实际填写的盘点数
                        input_check_price: '',//实际填写的进价
                    }
                ],
                tableData: [
                    {
                        id: 1,
                        ware_name: '名称',
                        order: '3454554',
                        time: '2021-05-06',
                        goods_name: '商品名',
                        rank: '12',
                        spec: '规格',
                        goods_type: '商品分类',
                        book_stock: '账面库存',
                        reality_stock: '盘实库存3',
                        balance: '盈亏数量',
                        price: '5445',
                        err_rate: '0.1',
                        type: '盘盈',
                        state: '已通过',
                        note: '',
                    }, {
                        id: 2,
                        ware_name: '名称2',
                        order: '3454554',
                        time: '2021-05-06',
                        goods_name: '商品名',
                        rank: '12',
                        spec: '规格',
                        goods_type: '商品分类',
                        book_stock: '账面库存',
                        reality_stock: '盘实库存3',
                        balance: '盈亏数量',
                        price: '5445',
                        err_rate: '0.1',
                        type: '盘盈',
                        state: '已通过',
                        note: '',
                    }
                ],
                goodsArr: [
                    {
                        id: 1,
                        name: '商品1',
                        rank: '001',
                        book_stock: 11,
                        unit: 1,
                    }, {
                        id: 2,
                        name: '商品2',
                        rank: '002',
                        book_stock: 12,
                        unit: 2,
                    }, {
                        id: 3,
                        name: '商品3',
                        rank: '003',
                        book_stock: 13,
                        unit: 1,
                    }
                ],
                unitArr: [{id: 1, name: 'KG'}, {id: 2, name: 'G'}],
                already_table: [],//创建的数据
            });

            onMounted(() => {
                getOrderlist();
            });

            // 改变仓库下拉框
            function change_ware_sel(e) {
                state.already_table = [];
                state.temp_data = [];
                let id = state.form.ware_id; //当前仓库勾选的
                get_pro_item(id);
            }

            // 获取对应的items,并添加到数组里
            function get_pro_item(top_id) {
                ctx.$http
                    .post("/tanxiaji/supplier/goods/", {
                        supplier_id: top_id,
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            let data = res.data;
                            state.temp_data = JSON.parse(JSON.stringify(data));
                            let items = [];
                            if (!data.length) return;
                            data.forEach((v) => {
                                let obj = {
                                    id: v.id,
                                    name: v.name,
                                };
                                items.push(obj);
                            });
                            console.log("items", items);
                            let obj = {
                                selected_id: data[0].id,
                                rank: data[0].carton,
                                book_stock: data[0].stock,
                                select_arr: items,
                                unit: 2,
                            };
                            state.already_table.push(obj);
                            console.log("菜单里", state.already_table);
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            //新建
            function submit_create() {
                var data = {}
                var already_table = state.already_table;
                var detailTableArr = state.tableDetailArr;
                var arr = [], arr1 = []

                if (state.drawer_type == 1) { //创建
                    for (var i = 0; i < already_table.length; i++) {
                        var item = already_table[i]
                        arr.push({
                            id: item.selected_id,
                            unit: item.unit
                        })
                    }
                    data = state.form
                    data.note = state.note
                    data.item = arr
                } else if (state.drawer_type == 4) {  //盘点
                    data.id = state.plan_id
                    data.note = state.note
                    for (var i = 0; i < detailTableArr.length; i++) {
                        var item = detailTableArr[i]
                        arr.push({
                            id: item.id,
                            check_count: item.input_check_count,
                            check_price: item.input_check_price
                        })
                    }
                    data.item = arr
                } else if (state.drawer_type == 3) {  //审核
                    data.id = state.plan_id
                    data.approve = state.approve_note
                }

                console.log(data)
                return
                form.value.validate((valid) => {
                    if (valid) {
                        console.log(data)
                    }
                })
            }

            //更改商品
            function changeGoodsFun(item, e) {
                let origin = state.temp_data;
                let current_chose = origin.filter((v) => v.id == e)[0];
                item.id = current_chose.id;
                item.rank = current_chose.carton;
                item.book_stock = current_chose.stock;
                item.unit = 1;
            }

            //更改商品-规格
            function changeSpecFun() {
                console.log("更改商品");
            }

            //页码
            function changePage() {
                console.log("页码操作");
            }

            //审核
            function verifyFun(item) {
                console.log(item)
                state.plan_id = item.id
                state.drawer_title = '审核盘点计划'
                state.drawer_type = 3 // 1:创建  2：详情  3：审核  4：盘点
                state.new_dialogVisible = true
            }

            //详情
            function detailFun(item) {
                console.log(item)
                state.plan_id = item.id
                state.drawer_title = '盘点计划详情'
                state.drawer_type = 2 // 1:创建  2：详情  3：审核  4：盘点
                state.new_dialogVisible = true
            }

            //盘点
            function checkFun(item) {
                console.log(item)
                state.plan_id = item.id
                state.drawer_title = '盘点'
                state.drawer_type = 4 // 1:创建  2：详情  3：审核  4：盘点
                state.new_dialogVisible = true
            }

            //移除
            function deleteFun(index) {
                state.already_table.splice(index, 1);
            }

            // 打开新建弹窗
            function new_set_ware() {
                state.drawer_title = '创建盘点计划'
                state.drawer_type = 1 // 1:创建  2：详情  3：审核
                state.new_dialogVisible = true;
                state.already_table = [];
                state.form.ware_id = "";
                state.form.plan_name = "";
                ctx.$http
                    .post("/tanxiaji/supplier/list/short/")
                    .then((res) => {
                        if (res.errno == 0) {
                            let data = res.data;
                            state.wareArray = data;
                        } else {
                            ElNotification.error(res.errmsg);
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            //添加商品
            function addGoodsFun() {
                let current_top_id = state.form.ware_id;
                console.log(current_top_id);
                get_pro_item(current_top_id);
            }

            // 点击提交
            function create_ware() {
                form.value.validate((valid) => {
                    if (valid) {
                        var data = {
                            name: state.set_form.supplier_name,
                            liaison: state.set_form.contact_name,
                            phone: state.set_form.contact_phone,
                            address: state.set_form.address,
                            area_id: state.set_form.area,
                            grade: state.s_type,
                            note: state.set_form.note,
                            tag: "测试4",
                        };
                        var url = "";
                        if (state.supplier_id == 0) {
                            //创建
                            url = "/tanxiaji/supplier/create/";
                        } else {
                            data.supplier_id = state.supplier_id;
                            url = "/tanxiaji/supplier/edit/";
                        }
                        console.log(data, url);
                        ctx.$http
                            .post(url, data)
                            .then((res) => {
                                if (res.errno == 0) {
                                    ElNotification.success(res.errmsg);
                                    getOrderlist();
                                    close();
                                }
                            })
                            .catch((err) => {
                                ElNotification.error(err);
                            });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }

            //关闭弹框
            function closeFun() {
                form.value.resetFields();
                state.new_dialogVisible = false
            }

            // 获取页面数据
            function getOrderlist() {
                ctx.$http
                    .post("/tanxiaji/supplier/list/", {
                        s_type: state.s_type,
                        keyword: state.keyword,
                        page: state.page,
                        tag: state.tag,
                    })
                    .then((res) => {
                        if (res.errno == 0) {
                            var list = res.data;
                            // state.tableData = list.supplier_list;
                            // state.supper_arr = list.supplier_list;
                            // state.totalPage = list.pages;
                        }
                    })
                    .catch((err) => {
                        ElNotification.error(err);
                    });
            }

            //选择供应商
            function changeSupplierName() {
                console.log(state.keyword);
                getOrderlist();
            }

            //请选择供应商状态
            function changeSupplierType() {
                console.log(state.s_type);
                getOrderlist();
            }

            // 搜索框
            function searchClick(e) {
                console.log(e);
                state.keyword = e;
                getOrderlist();
            }


            // 获取时间
            function dateFun(e) {
                console.log(e);
                state.begin_date = e.begin_date;
                state.end_date = e.end_date;
                getOrderlist();
            }

            // 创建仓库
            return {
                dateFun,
                form,
                state,
                searchClick,
                getOrderlist,
                verifyFun,
                detailFun,
                changeSupplierType,
                new_set_ware,
                submit_create,
                closeFun,
                addGoodsFun,
                deleteFun,
                checkFun,
                changeGoodsFun,
                changeSpecFun,
                change_ware_sel
            }
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .el-card {
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    justify-content: flex-start;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                    }
                }
                .row-right {
                    display: flex;
                    justify-content: flex-end;
                    .search-div {
                        margin-right: 10px;
                    }
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .el-select {
                width: 100%;
            }
            .el-table /deep/ th {
                background-color: #eeeeee42;
                text-align: center;
            }

        }
    }

    .row-bg {
        margin-top: 10px;
    }

    .el-col-6 {
        max-width: 33.3%;
        -webkit-box-flex: 0;
        flex: auto;
    }

    .color-red {
        color: red;
    }

    .color-green {
        color: #41ca21;
    }

    /deep/ .el-form-item__content {
        display: flex;
    }

    /deep/ .el-drawer {
        width: 60% !important;
    }

    /deep/ label {
        font-weight: normal;
    }

    .demo-ruleForm {
        width: 90%;
        margin: auto;
        .el-table--small /deep/ td, .el-table--small /deep/ th {
            padding: 4px 0;
        }
        .drawer_title {
            width: 100%;
            line-height: 40px;
            margin-top: 10px;
        }
        /deep/ .el-textarea__inner {
            margin: 10px 0;
        }
        .detail_box {
            padding-left: 40px;
            margin: 8px 0;
        }
        .span-border {
            width: 200px;
            padding: 5px 40px 5px 10px;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            margin: 8px 0;
        }
        .textarea-border {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            margin: 8px 0;
        }
        .detail-top {
            width: 80%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .add-box {
            margin: 10px;
            color: #409EFF;
            cursor: pointer;
            span {
                width: 18px;
                height: 18px;
                line-height: 16px;
                text-align: center;
                border-radius: 50%;
                border: 1px solid #409EFF;
                margin-right: 8px;
                display: inline-block;
            }
        }

    }

    .dialog_footer {
        width: 60%;
        margin: 60px auto 20px auto;
        display: flex;
        justify-content: space-around;
    }

    /*/deep/ .el-table th > .cell {*/
    /*white-space: nowrap;*/
    /*}*/

    /deep/ .el-table__body .el-button--small {
        min-height: auto;
        padding: 0;
    }
</style>